<template>
  <div class="ivz-preview-edit">
    <ADrawer :visible="preview.editVisible"  :title="model.title" :placement="model.placement" :mask="model.mask"
              :closable="false" get-container=".ivz-preview-view" :wrap-style="{ position: 'absolute' }" :width="model.drawerRate"
              @close="closeHandle" :maskClosable="model.maskClosable" :class="preview.editVisible ? 'ivz-pe-view' : 'ivz-pe-hidden'">
      <ASpin :spinning="spinning">
        <AForm :labelAlign="model.align" :wrapperCol="model.layout == 'horizontal' ? model.wrapperCol : null"
          :labelCol="model.layout == 'horizontal' ? model.labelCol : null" :layout="model.layout" :model="editModel" ref="previewEditFormRef">
          <ARow :gutter="3">
            <ACol :span="span" v-for="meta in editMetas" :key="meta.id">
              <IvzPreviewItem v-if="meta['tabModel'].isForm" :meta="meta" :edit-model="editModel" />
            </ACol>
          </ARow>
        </AForm>
        <div style="text-align: center">
          <ASpace align="center">
            <AButton v-for="meta in editFunMetas" :key="meta.func" @click="() => funcHandle(meta)">{{meta.name}}</AButton>
          </ASpace>
        </div>
      </ASpin>
    </ADrawer>
  </div>
</template>

<script>
import {mapGetters, mapState, useStore} from "vuex";
import IvzPreviewItem from "@/components/preview/IvzPreviewItem.vue";
import {inject, reactive, ref, watch} from "vue";
import Preview from "@/components/preview/index";

export default {
  name: "IvzPreviewEdit",
  components: {IvzPreviewItem},
  setup() {
    let store = useStore();
    let spinning = ref(false);
    let editModel = ref({})
    let meta = store.getters['editMeta'];
    let model = meta.tabModel;
    let previewEditFormRef = ref(null);
    let context = inject(Preview.PreviewProvideContext);
    return {model, editModel, context, spinning, previewEditFormRef}
  },
  computed: {
    ...mapGetters(['containerMeta', 'preview', 'editMetas', 'editFunMetas', 'editTabModel']),
    span() {
      return 24 / this.editTabModel['column'];
    }
  },
  created() {
    this.context['getById'] = (id) => {
      this.$http.get("/preview/edit", {params: {id}}).then(resp => {
        if(resp.code == 200) {
          this.editModel = resp.data;
        } else {
          this.$msg.errorMessage(resp.message)
        }
      }).catch(reason => console.log(reason))
    }
    this.context['add'] = () => {
      this.editModel = {};
      this.editMetas.forEach(meta => {
        this.editModel[meta.id] = meta['tabModel'][meta.id]
      })
    }
  },
  methods: {
    closeHandle() {
      this.preview.editVisible = false;
    },
    funcHandle({func}) {
      if(func == 'cancel') {
        this.preview.editVisible = false;
      } else if(func == 'submit') {
        this.previewEditFormRef.validate().then(() => {
          this.spinning = true;
          this.$http.post('/preview/edit', this.editModel).then(resp => {
            if(resp.code == 200) {
              this.preview.editVisible = false;
              this.context.query();
            } else {
              this.$msg.errorMessage(resp.message)
            }
          }).finally(() => this.spinning = false)
        })
      } else if(func == 'reset') {
        this.previewEditFormRef.resetFields();
      }
    }
  }
}
</script>

<style>
.ivz-pe-hidden .ant-drawer-content-wrapper {
  /*width: 0px!important;*/
  display: none;
}
</style>